<template>
	<view class="grass_planting_activity">
		<view class="top">
			<view class="planting_btn" @click.native="getLink">种草记录</view>
			<image class="top_image" src="https://dy.sykj365.com/uploads/mini/top@2x.png" mode="widthFix"></image>
		</view>
		<view class="center">
			<view class="sub_mark">
				<image src="https://dy.sykj365.com/uploads/mini/grass11@2x.png" mode="widthFix"></image>
				<view class="search-input">
					<input class="uni-input" placeholder="请粘贴你的小红书笔记链接" v-model="redBookLink" @input="clearInput"/>
					<text class="uni-icon" v-if="showClearIcon" @click="clearIcon"></text>
					<view class="search-btn" @click="xhsShare">提交</view>
				</view>
			</view>
			<view class="tips">
				<image src="https://dy.sykj365.com/uploads/mini/grass10@2x.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="footer">
			<view class="progress" v-if="showShareProgress">
				<image src="https://dy.sykj365.com/uploads/mini/grass13@2x.png" mode="widthFix" class="progress_right_top"></image>
				<view class="progress_list">
					<view class="list_left">
						<image src="https://dy.sykj365.com/uploads/mini/finish@2x.png" mode="widthFix" class="list_left_image"></image>
						<view class="list_left_line"></view>
					</view>
					<view class="list_right">
						<view class="list_right_title">
							<text>提交笔记</text>
							<!-- <text>用户</text> -->
						</view>
						<view class="list_right_content" v-if="share.create_time">
							<text>{{share.create_time}}</text>
							<text class="special-word">提交</text>
						</view>
					</view>
				</view>
				<view class="progress_list" >
					<view class="list_left">
						<image src="https://dy.sykj365.com/uploads/mini/finish@2x.png" mode="widthFix" class="list_left_image"></image>
						<view class="list_left_line"></view>
					</view>
					<view class="list_right">
						<view class="list_right_title">
							<text>审核笔记</text>
							<text class="special-word">{{getStatus(share.status)}}</text>
						</view>
						<view class="list_right_content">
							<text>7个工作日内审核</text>
						</view>
					</view>
				</view>
				<view class="progress_list">
					<view class="list_left">
						<image src="https://dy.sykj365.com/uploads/mini/finish@2x.png" mode="widthFix" class="list_left_image"></image>
					</view>
					<view class="list_right">
						<view class="list_right_title">
							<text>领取优惠</text>
						</view>
						<view class="list_right_content" v-if="share.status&&share.status!=='0'">
							<text>审核时间：</text>
							<text>{{share.audit_time}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="requirement">
				<image src="https://dy.sykj365.com/uploads/mini/title@2x.png" mode="widthFix"></image>
			</view>
			<view class="step_container step_container_one">
				<view>·配图</view>
				<view>打印成品实拍图，至少2张</view>
			</view>
			<view class="step_container step_container_two">
				<view>·标题</view>
				<view>必须填写标题，字数不限</view>
			</view>
			<view class="step_container step_container_three">
				<view>·文案</view>
				<view>必须带“91网络打印”字眼，可从价格、质量、物流，客服服务等角度描述，不可直接复制抄袭他人笔记内容</view>
			</view>
			<view class="topic_activity">
				<view class="topic">
					<image src="https://dy.sykj365.com/uploads/mini/grass14@2x(3).png"></image>
					<view class="topic_title">不少于3个，必须含以下三类话题，每类任选1个</view>
					<view class="topic_content">
						<text class="topic_content_special">类型1:</text>
						<text class="topic_content_description">带“打印”字眼，如#打印 #网上打印 #线上打印 #资料打印 #打印资料 #网上打印资料 #照片打印 </text>
					</view>
					<view class="topic_content">
						<text class="topic_content_special">类型2:</text>
						<text class="topic_content_description">带“91网络打印”字眼，如#91网络打印 #91网络打印真香 #91网络打印顺丰包邮 #小91网络打印草 #91网络打印网上打印</text>
					</view>
					<view class="topic_content">
						<text class="topic_content_special">类型3:</text>
						<text class="topic_content_description">带内容相关字眼，如#四六级 #考研 #公考 #事业单位 #高中生 #初中生 #小学</text>
					</view>
				</view>
				<view class="rules">
					<image src="https://dy.sykj365.com/uploads/mini/grass14@2x(4).png"></image>
					<view class="rules_content">
						<view class="rules_content_special"></view>
						<view class="rules_content_description">1.发布一条满足要求的笔记即可获得10元无门槛优惠券，领取后60天内有效;</view>
					</view>
					<view class="rules_content">
						<view class="rules_content_special"></view>
						<view class="rules_content_description">2.
							<text style="color:#FF6314;">91工作人员会在你提交笔记后7个工作日内审核，审核通过后在本活动页点击领取优惠券即可</text>
							<text>，请于审核通过后90天内领取，如超时未领取则结束当次种草活动;</text>
						</view>
						
					</view>
					<view class="rules_content">
						<view class="rules_content_special"></view>
						<view class="rules_content_description">3.每位用户在使用当次种草官优惠券并间隔7天后，可再次发布新的笔记参与活动且笔记内容不能雷同;</view>
					</view>
					<view class="rules_content">
						<view class="rules_content_special"></view>
						<view class="rules_content_description" style="margin-top:0;">4.活动时间:2024.05.17-2025.05.17</view>
					</view>
					<view class="rules_content">
						<view class="rules_content_special"></view>
						<view class="rules_content_description">5.活动解释权归91网络打印所有，如有疑惑可以咨询小猴客服哦。</view>
					</view>
				</view>
			</view>			
		</view>
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				showClearIcon: false,
				showShareProgress: false,
				redBookLink: '',
				shareList: [],
				share: {
					create_time: '',
					audit_time: '',
					status: '',					
				}
			}
		},		
		onLoad(){
			this.getShareList()
		},
		methods: {
			xhsShare() {
				if(!this.redBookLink){
					return false;
				}				
				uni.showLoading();
				this.$http.post(this.$api.xhsShare,{
					short_url: this.redBookLink
				}).then(res => {
					if(res.code === 20000){
						this.getShareList();
						getApp().getMsg(res.msg);
					}					
				})
			},
			getShareList(){
				this.$http.get(this.$api.shareList).then(res => {
					if(res.code === 20000){
						let arr = res.data;
						if(Array.isArray(arr) && arr.length > 0){
							this.share	= arr[0];
							this.showShareProgress = true;
						}else{
							this.showShareProgress = false;
						}
					}
				})
			},		
			getStatus(val) {
				switch(val){
					case '0':
					  return '审核中'
					case '1':
					  return '已同意'
					case '2':
					  return '已驳回'
					default:
					  return ''
				}
			},
			clearInput(event){
				this.redBookLink = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon(){
				this.redBookLink = '';
				this.showClearIcon = false;
			},
			getLink(){
				getApp().getNavigateTo('/pages/my/grassPlantingRecords');
			}
		},
	}
</script>

<style lang="less">
.grass_planting_activity {
	.top{
		background-image: url("https://dy.sykj365.com/uploads/mini/bg@2x.png");
		background-size: cover;
		padding-top: 32rpx;
		padding-left: 29rpx;
		&_image{
			width: 100%;
			height: 100%;
		}
	}
	.center{
		padding: 32rpx 29rpx;
		background-image: linear-gradient(to bottom, #fff, #5AFFC8);
	}
	.footer{
		padding: 32rpx 29rpx;
		background-color:#5AFFC8 ;
	}
	.planting_btn {
		position: absolute;
		right: 0;
		top: 486rpx;
		width: 54rpx;
		text-align: center;
		color: #0547E8;
		font-weight: bold;
		background: #FFFFFF;
		border-radius: 20rpx 0 0 20rpx;
		border: 3px solid #0547E8;
		border-right: none;
		padding: 32rpx 0;
		z-index: 1;
	}
	.sub_mark {
		position: relative;
		margin-top: 65rpx;
		height: 243rpx;
		background: #5AFFC8;
		border-radius: 9rpx;
		border: 2px solid #0547E8;
		image {
			position: absolute;
			left: 54rpx;
			top: -45rpx;
			width: 293rpx;
			height: 73rpx;
		}
		.search-input {
			display: flex;
			margin: 92rpx 63rpx 0 46rpx;
			.uni-input {
				flex: 1;
				height: 82rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				border: 2px solid #000000;
				padding-left: 28rpx;
				padding-right: 146rpx;
				font-size:24rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.uni-input::placeholder {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 82rpx;
			}
			.search-btn {
				z-index: 2;
				position: absolute;
				right: 59rpx;
				text-align: center;
				width: 156rpx;
				height: 82rpx;
				background: #FF6314;
				border-radius: 40rpx;
				border: 2px solid #000000;
				font-weight: 800;
				font-size: 39rpx;
				color: #FFFFFF;
				line-height: 82rpx;
			}			
		}
	}
	.tips {
		margin-top: 49rpx;
		height: 268rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.special-word{
		font-weight: bold;
		font-size: 30rpx;
		color: #FF6314;
	}
	.progress {
		position: relative;
		margin-top: 84rpx;
		height: 427rpx;
		background: #FFFFFF;
		border-radius: 9rpx;
		border: 2px solid #0547E8;
		padding-left: 70rpx;
		padding-top: 70rpx;
		box-sizing: border-box;
		&_right_top {
			position: absolute;
			right: -6rpx;
			top: -36rpx;
			width: 293rpx;
			height: 72rpx;
		}
		&_list{
			display: flex;
			.list_left{
				padding-top: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				&_image{
					width: 28rpx;
					height: 28rpx;
				}
				&_line{
					width: 4rpx;
					height: 80rpx;
					background: #EEEEEE;
					transform: translateY(6rpx);
				}
			}
			.list_right{
				flex: 1;
				padding-left: 30rpx;
				&_title{
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
					line-height: 44rpx;
					text:nth-child(1){
						margin-right: 20rpx;
					}
				}
				&_content{
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					line-height: 54rpx;
					text:nth-child(2){
						margin-left: 15rpx;
					}
				}
			}
		}
	}
	.requirement {
		margin: 48rpx 0;
		>image{
			margin: 0 auto;
			width: 583rpx;
			height: 180rpx;
		}
	}
	.step_container {
		margin-bottom: 17rpx;
		padding-left: 30rpx;
		padding-right: 150rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background-size: 100% 100%;
		view:nth-child(1){
			font-weight: 800;
			font-size: 31rpx;
			color: #000000;
			line-height: 53rpx;
			margin-right: 18rpx;
			width: 80rpx;
		}
		view:nth-child(2){
			font-weight: 500;
			font-size: 21rpx;
			color: #000000;
			line-height: 36rpx;
			flex: 1;
		}
	}
	.step_container_one{
		background-image: url('https://dy.sykj365.com/uploads/mini/no1.png');
		height: 132rpx;
	}
	.step_container_two{
		background-image: url('https://dy.sykj365.com/uploads/mini/no2.png');
		height: 132rpx;
	}
	.step_container_three{
		background-image: url('https://dy.sykj365.com/uploads/mini/no3.png');
		height: 193rpx;
	}
	.topic_activity{
		margin-top: 49rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 9rpx;
		border: 2px solid #0547E8;
		padding: 75rpx 33rpx;
		box-sizing: border-box;
		.topic{
			position: relative;
			height: auto;
			background: #FFFFFF;
			border-radius: 9rpx;
			border: 2px solid #000000;
			padding: 60rpx 30rpx 30rpx;
			box-sizing: border-box;
			image{
				width: 220rpx;
				height: 64rpx;
				position: absolute;
				top: -32rpx;
				left: -8rpx;
			}
			&_title{
				font-weight: bold;
				font-size: 24rpx;
				color: #FF6314;
				line-height: 40rpx;
				text-align: center;
			}
			&_content{
				margin: 10rpx 0;
				&_special{
					width: 83rpx;
					height: 47rpx;
					background: #FF6314;
					border-radius: 23rpx;
					border: 2px solid #070707;
					font-weight: 400;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 46rpx;
					text-align: center;
					display: inline-block;
					margin-right: 10rpx;
				}
				&_description{
					font-weight: 400;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 46rpx;
					color: #000;
				}
			}
		}
		.rules {
			margin-top: 72rpx;
			position: relative;
			height: auto;
			background: #FFFFFF;
			border-radius: 9rpx;
			border: 2px solid #000000;
			padding: 60rpx 30rpx 30rpx;
			box-sizing: border-box;
			image{
				width: 220rpx;
				height: 64rpx;
				position: absolute;
				top: -32rpx;
				left: -8rpx;
			}
			&_title{
				font-weight: bold;
				font-size: 24rpx;
				color: #FF6314;
				line-height: 40rpx;
				text-align: center;
			}
			&_content:not(:last-child) {
				border-bottom: 2px dashed #0547E8;
			}
			&_content{
				padding: 25rpx 0;
				margin-top: 25rpx;				
				overflow: hidden;
				&_special{
					float: left;
					width: 43rpx;
					height: 43rpx;
					background: #FF6314;
					border-radius: 50%;
					border: 2px solid #070707;
					font-weight: 400;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					text-align: center;
					margin-right: 22rpx;
					margin-top: 8rpx;
				}
				&_description{
					float: left;
					width: calc(100% - 72rpx);
					font-weight: 400;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					color: #000;
				}
			}
		}
	}    
}
</style>